<template>
  <el-dialog v-show="dialogLevelVisible" :visible.sync="dialogLevelVisible" :close-on-click-modal="false" :modal-append-to-body="false" @close="closeLevel">
    <el-card shadow="never" class="tableCard">
      <vxe-toolbar :refresh="{query: getLevelList}" />
      <!-- :loading="loading" -->
      <vxe-table
        ref="levelTable"
        border
        resizable
        highlight-hover-row
        :auto-resize="true"
        :data="levelData"
        width
        max-height="500"
        :print-config="{}"
        row-id="id"
        highlight-current-row
        text-algin="center"
        :checkbox-config="{checkRowKeys: defaultCheckIds, checkStrictly: false}"
        @checkbox-all="selectAll"
        @checkbox-change="selectChangeEvent"
      >
        <vxe-table-column type="checkbox"align="center" width="60" />
        <vxe-table-column width="100px" field="codeName" align="center" title="等级" />
        <vxe-table-column width="160px" field="name" align="center" title="等级名称" />
        <vxe-table-column min-width="100px" field="info" align="center" title="等级说明" />
      </vxe-table>
      <vxe-pager
        :current-page.sync="levelCurrentPage"
        :page-size.sync="levelPageSize"
        :total="levelTotal"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        @page-change="getLevelList()"
      />
    </el-card>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeLevel">取 消</el-button>
      <el-button type="primary" @click="levelSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import SearchButton from '@/components/SearchButton'
import { getEffectivePageList as getLevelPageList } from '@/api/memberLevel'
import { getEffectivePageList as getTagPageList } from '@/api/memberTags'

export default {
  components: {
    SearchButton
  },
  props: {
    // 弹窗类型 0 代表会员等级弹窗  1代表 会员标签弹窗
    dialogTitle: {
      type: String,
      default: ''
    },
    EchoDialogLevelVisible: {
      type: Boolean,
      default: false
    },
    EchoLevelList: {
      type: Array,
      default: []
    },
    EchoLevelCheckIds: {
      type: Array,
      default: []
    }
    // ,
    // echoList: {
    //   type: Array,
    //   default: []
    // }
  },
  data() {
    return {
      dialogLevelVisible: this.EchoDialogLevelVisible,
      // 弹窗标题
      // dialogTitle: '等级名称',
      levelParams: {
      },
      // 表格选中列表
      checkList: [],
      // 等级数据
      levelData: [],
      // 选中id数组
      defaultCheckIds: [],
      // 表格分页 当前页码
      levelCurrentPage: 1,
      // 分页请求数量
      levelPageSize: 10,
      // 当前总页数
      levelTotal: 1,
      levelList: [],
      levelCheckIds: []
    }
  },
  created() {
    this.getLevelList()
    this.defaultCheckIds = this.EchoLevelCheckIds
    this.checkList = this.EchoLevelList
  },
  methods: {
    // 重置按钮
    refreshParams() {
      this.levelParams = {}
    },
    // 获取会员等级列表
    getLevelList() {
      if (this.dialogTitle !== '标签名称') {
        getLevelPageList({
          pageNum: this.levelCurrentPage,
          pageSize: this.levelPageSize,
          ...this.levelParams
        }).then((response) => {
          this.levelData = response.records
          this.levelTotal = response.total
          console.log('response', response)
          this.$refs.levelTable.reloadData(this.levelData)
        })
      } else {
        getTagPageList({
          pageNum: this.levelCurrentPage,
          pageSize: this.levelPageSize,
          ...this.levelParams
        }).then((response) => {
          this.levelData = response.records
          this.levelTotal = response.total
          this.$refs.levelTable.reloadData(this.levelData)
        })
      }
    },
    // 全部选中
    selectAll(e) {
      if (e.checked) {
        this.checkList.push(...e.records)
        this.defaultCheckIds.push(...e.records.map((item) => item.id))
        this.checkList = Array.from(new Set(this.checkList))
        this.defaultCheckIds = Array.from(new Set(this.defaultCheckIds))
      } else {
        const arr = this.list.map((item) => item.id)
        const arr1 = []
        this.checkList.forEach((item, index) => {
          arr.forEach((it) => {
            if (item.id === it) {
              arr1.push(index)
            }
          })
        })
        arr1.reverse().forEach((item) => {
          this.checkList.splice(item, 1)
          this.defaultCheckIds.splice(item, 1)
        })
      }
    },
    selectChangeEvent(row) {
      let i = -1
      this.checkList.forEach((item, index) => {
        if (item.id === row.row.id) {
          i = index
        }
      })
      if (i === -1) {
        this.checkList.push(row.row)
        this.defaultCheckIds.push(row.row.id)
      } else {
        this.checkList.splice(i, 1)
        this.defaultCheckIds.splice(i, 1)
      }
      console.log('this.checkList', this.checkList)
      console.log('this.defaultCheckIds', this.defaultCheckIds)
    },
    closeLevel() {
      // this.dialogLevelVisible = false
      this.levelList = JSON.parse(JSON.stringify(this.checkList))
      this.levelCheckIds = JSON.parse(JSON.stringify(this.defaultCheckIds))
      const test = false
      const objData = {
        levelList: this.levelList,
        levelCheckIds: this.levelCheckIds,
        dialogLevelVisible: test,
        limitType: 'LEVEL_LIMIT'
      }
      this.$emit('getLevelInfo', objData)
      console.log('objData', objData)
    },
    // 会员等级弹窗确定按钮
    levelSubmit() {
      // this.dialogLevelVisible = false
      this.levelList = JSON.parse(JSON.stringify(this.checkList))
      this.levelCheckIds = JSON.parse(JSON.stringify(this.defaultCheckIds))
      const objData = {
        levelList: this.levelList,
        levelCheckIds: this.levelCheckIds,
        dialogLevelVisible: false,
        limitType: 'LEVEL_LIMIT'
      }
      this.$emit('getLevelInfo', objData)
      console.log('this.levelList', this.checkList)
      console.log('this.levelCheckIds', this.levelCheckIds)
      // this.params.memberIdList = this.levelCheckIds
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
